<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>登录</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <!--引入字体图标相关的样式文件-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><!---->
    <!--引入Font Awesome框架实现字体图标效果-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!--引入外部css文件,首页样式-->
    <link rel="stylesheet" href="css/index.css">
    <!--引入外部css文件,登录样式-->
    <link rel="stylesheet" href="css/login.css">
    <!--引入iconfont字库-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2932829_gw0c9i9k6gd.css">
    <!--引入jQuery框架文件,使用CDN服务器进行引入-->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!--引入vue框架-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--引入AXIOS-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<!--头部标签-->
<header id="miao">
    <div class="header">
        <!--上导航条-->
        <div class="header-top" style="position: absolute;width: 100%">
            <!--手机下单二维码-->
            <div></div>
            <!--关注微信二维码-->
            <div></div>
            <div class="container" style="width: 1168px">
                <!--左div-->
                <div class="con-left">
                    <p class="text-color-9">嗨，欢迎来订花乐！</p>
                    <a href="">
                        <!--微信图标-->
                        <i class=" iconfont icon-floristweixin" style="color: rgb(136,78,34);"></i>
                        <span class="text-color-9">关注微信</span>
                    </a>
                </div>
                <!--右div-->
                <div class="con-right">
                    <a href="#" class="text-color-9">你好，请登录</a>
                    <span class="text-color-9">|</span>
                    <a href="reg.html" class="text-color-9">免费注册</a>
                    <span class="text-color-9">|</span>
                    <a href="" class="text-color-9">订单查询</a>
                    <span class="text-color-9">|</span>
                    <a href="" class="text-color-9">
                        <!--购物车图标-->
                        <i class="iconfont icon-floristgouwuche" style="color: rgb(136,78,34);"></i>
                        <span class="text-color-9">购物车</span>
                        <span class="text-color-9">(0)</span>
                    </a>
                    <span class="text-color-9">|</span>
                    <a href="#" class="text-color-9">手机下单</a>
                </div>
            </div>
        </div>
        <!--下导航条-->
        <div class="header-bottom">
            <!--搜索栏-->
            <div class="container" style="width: 1168px">
                <!--商标-->
                <div class="logo-img">
                    <a href="">
                        <img src="images/logo.png" alt="网页logo">
                    </a>
                </div>
                <div class="phone-search">
                    <p class="phone-search-text">
                        <i class="glyphicon glyphicon-phone-alt" style="color: rgb(136,78,34) ;font-size: 22px;"></i>
                        <span class="text-color-9" style="font-size: 17px;">400-0606-1520</span>
                    </p>
                </div>
            </div>
            <!--分类栏-->
            <div class="container" id="subject" style="height: 35px">

            </div>
        </div>
    </div>
</header>
<!--头部标签结束-->
<!--登录区域开始-->
<div class="contentMain">
    <!--登录-->
    <div id="denglupagemianban">
        <!--账号登录-->
        <div class="registration-form" id="tologin">
            <div class="registration-formtitlea">
                <div class="zhanghaodnegluclass activedengluclass">账号登录</div>
            </div>
            <div id="form">
                <form action="">
                    <div class="registration-formconta">
                        <div>
                            <h4 style="color: #E60634">{{result}}</h4><!--登录验证反馈-->
                            <label><i class="fa fa-user-circle" aria-hidden="true"></i></label>
                            <input type="text" name="phone" id="accountTel" placeholder="请输入手机号">
                        </div>
                        <div>
                            <label><i class="fa fa-unlock-alt" aria-hidden="true" style="width: 15px"></i></label>
                            <input type="password" name="password" id="accountPass" placeholder="请输入密码">
                        </div>
                        <div class="resgisti-button cursorpointer" @click="login()">
                            登录
                        </div>
                    </div>
                </form>
            </div>
            <div class="registration-formbottom">
                <div class="qqclasss cursorpointer" onclick="loginMethods(1)"></div>
                <div class="weixinclass cursorpointer" onclick="loginMethods(2)"></div>
                <div onclick="qiehuanLoginAccount(false)" class="redFont dnegluclass cursorpointer">
                    <text><a href="reg.html" style="color: red">注册账号</a></text>
                    <i class="fa fa-angle-right fa-lg" aria-hidden="true"></i>
                </div>
            </div>
        </div>
    </div>
</div>
<!--登录区域结束-->
<!--尾部区域开始-->
<footer>
    <div class="footer" style="margin-top: 10px;">
        <!--尾部上区域-->
        <div class="footer-top" style="background: #fff;">
            <div class="footer-top-all container" style="height: 210px;width: 1200px">
                <div class="logo-img">
                    <img src="images/logo.png" alt="">
                </div>
                <div class="nav-module" style="height: 210px">
                    <div class="footer-module fl">
                        <p>热门导航</p>
                        <div>
                            <a href="">网站首页</a>
                            <a href="">爱情鲜花</a>
                            <a href="">订单查询</a>
                            <a href="">全部商品</a>
                        </div>
                    </div>
                    <div class="footer-module fl">
                        <p>客户服务</p>
                        <div>
                            <div class="footer-nav fl">
                                <a href="">关于我们</a>
                                <a href="">服务声明</a>
                                <a href="">订花流程</a>
                                <a href="">支付方式</a>
                            </div>
                            <div class="footer-nav fl" style="margin-left: 20px">
                                <a href="">配送说明</a>
                                <a href="">售后服务</a>
                                <a href="">隐私条款</a>
                                <a href="">联系我们</a>
                            </div>
                        </div>
                    </div>
                    <div class="footer-module fl" style="border:none">
                        <p>联系我们</p>
                        <div class="footer-nav">
                            <a href="">意见反馈</a>
                            <a href="">工作时间:07:00-23:00</a>
                            <a href="">7*24小时在线订购</a>
                            <a href="">全国热线:400-060-1520</a>
                        </div>
                    </div>
                    <div class="erweima fr">
                        <div class="erweima-img">
                            <img src="images/QRCode.jpg" alt="">
                        </div>
                        <p class="text-color-9">扫码关注微信</p>
                    </div>
                </div>
            </div>
        </div>
        <!--尾部下区域-->
        <div class="footer-bottom">
            <p class="text-color-9">Copyright©2020 &nbsp;成都勿忘我科技有限公司 &nbsp;
                <a href="https://beian.miit.gov.cn">蜀ICP备20016463号-2</a>
            &nbsp;</p>
        </div>
    </div>
</footer>
<!--尾部区域结束-->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
    let login_v=new Vue({
        el:"#form",
        data:{
            result:""
        },
        methods: {
            login:function () {
                let data=new FormData(document.querySelector("form"));
                axios.post("/user/login",data).then(function (response) {
                    if (response.data==1){
                        location.href="/";  /*登录成功*/
                    }else if (response.data==3){
                        login_v.result="用户不存在!";
                        accountTel.value="";
                    }else {
                        login_v.result="密码错误!";
                        accountPass.value="";
                    }
                })
            }
        }
    })

</script>
</body>
</html>


























